import React from "react";
import './index.css';
import ProductCard from "../../../../Component/ProductCard";
import {Button} from "antd";
import PriceTag from "../../../../Component/PriceTag";
import CarouselBig from "../../../../Component/CarouselBig";
import CoursewareSvg from "../../../../Common/svg/Courseware_1";
import Comment from "../../../../Component/Comment";
import Protrait from "../../../../Component/Protrait";
import Blank from "../../../../Component/Blank";
import ColorBox from "../../../../Component/ColorBox";
import Message from "../../../../Common/svg/Message";
import Heart from "../../../../Common/svg/Heart";
import MessageUtil from "../../../../utils/MessageUtil";

export default class extends React.Component{
    testLogo="http://39.100.3.34:8888/fly/2de6a15c0dc34c398272e2d6eecf266d.jpg";
    constructor(props){
        super();
        this.state={
            hired:props.hired,
            text:"hello",
            sellerName:"ives",
            seled:false
        }
    }
    componentDidMount(){
        MessageUtil.ChangeHeight();
    }
    render(){
        let status=this.state.seled?
        <ColorBox color="#CCC" text="已租出"/>
        :<ColorBox color="#49A1F1" text="未出租"/>;

        let time="租用时间：201909/23-2019/10-03";

        return(
            <div className="HireServiceDetail Courseware_Body">
                <div className="HireServiceDetail_User flexContainer">
                    <Protrait src={this.testLogo}/>
                    <span className="HireServiceDetail_User_Name">{this.state.sellerName}</span>
                    <span className="HireServiceDetail_User_State">{status}</span>
                    <span className="HireServiceDetail_User_State">{time}</span>
                    <Blank/>
                    <span className="HireServiceDetail_User_Collet"><span className="HireServiceDetail_User_Collet_SVG"><Heart/></span>收藏</span>
                    <span className="HireServiceDetail_User_Comment"><span className="HireServiceDetail_User_Collet_SVG"><Message/></span>留言</span>
                </div>
                <ProductCard
                    title={"Product title"}
                    subtitle={["品牌：大疆", "类型：四周飞行","型号：ZENMUSAKD","sn号：7315 059 4549"]}
                    badge={[
                        <img alt="Insurance" src="/assets/Good/Insurance.png"/>,
                        <img alt="GuaranteeMoney" src="/assets/Good/GuaranteeMoney.png"/>
                    ]}
                    priceText={<PriceTag currency={"￥"} price={"998"} unit={"天"}/>}
                />
                <p className="GrayBGContainer">
                    {this.state.text}
                </p>
                <CarouselBig img="http://39.100.3.34:8888/fly/2de6a15c0dc34c398272e2d6eecf266d.jpg"/>
                <div className="HireServiceDetail_Comment">
                    <div><CoursewareSvg fill="#333"/><span className="HireServiceDetail_CommentTitle">买家留言</span></div>
                    <div>
                        <Comment portrait={this.testLogo} 
                        name="ives" time="2020-9-2" text="测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论" />
                        <Comment isReply={true} portrait={this.testLogo} 
                        name="ives" time="2020-9-2" text="测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论" />
                    </div>
                </div>

                <div className="HireServiceDetail_Bottom">
                    <a href="/trade/hireServicePay" alt="buy">
                        <Button style={{width:"12rem"}} type="primary" shape="round" size="large">
                            即可租
                        </Button>
                    </a>
                </div>
            </div>
            
        )
    }
}